/**
 * 菜单状态管理
 * 用于处理菜单的状态和交互逻辑
 */
import { ref, computed } from 'vue';
import { fetchMenuItems, getInitialMenuItem } from '../utils/menuUtils';

/**
 * 菜单状态管理Hook
 * @param {Object} options 配置选项
 * @returns {Object} 菜单状态和方法
 */
export const useMenu = (options = {}) => {
  // 默认配置
  const defaultOptions = {
    title: 'AI代码比较',
    helpText: `提示词为：帮我生成一个可以在前端运行的爱心动画程序。
点开后立即呈现满屏闪烁发光的粉色爱心，
画面居中呈现浅蓝色的“I LOVE U”字体动画，
在一个html文件中实现。
请仔细检查代码，保证程序可正常运行。`,
  };

  const config = { ...defaultOptions, ...options };

  // 菜单状态
  const menuTitle = ref(config.title);
  const menuHelpText = ref(config.helpText);
  const menuItems = ref([]);
  const isMenuCollapsed = ref(false);
  const currentItem = ref(null);

  // 当前URL
  const currentUrl = computed(() => {
    return currentItem.value ? currentItem.value.url : '';
  });

  // 加载菜单数据
  const loadMenuItems = async () => {
    try {
      const items = await fetchMenuItems();
      menuItems.value = items;

      // 设置初始选中项
      if (items.length > 0) {
        const initialItem = getInitialMenuItem(items);
        currentItem.value = initialItem || items[0];
      }

      return items;
    } catch (error) {
      console.error('加载菜单数据失败:', error);
      return [];
    }
  };

  // 切换菜单折叠状态
  const toggleCollapse = () => {
    isMenuCollapsed.value = !isMenuCollapsed.value;
  };

  // 选择菜单项
  const selectMenuItem = (item) => {
    currentItem.value = item;
  };

  return {
    // 状态
    menuTitle,
    menuHelpText,
    menuItems,
    isMenuCollapsed,
    currentItem,
    currentUrl,

    // 方法
    loadMenuItems,
    toggleCollapse,
    selectMenuItem
  };
};